<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>06.模仿bootstrap写出自己的栅格系统</title>
	<link rel="stylesheet" type="text/css" href="./css/gridSystem.css">
	<style type="text/css">
		.container{
			background-color: #ccc;
			height: 800px;
		}
		.box{
			height: 50px;
			background-color: pink;
			border-bottom: 2px dashed #ccc;
		}
		.box1{
			height: 50px;
			background-color: lightblue;
			border-bottom: 2px dashed #ccc;
		}
		.box2{
			height: 50px;
			background-color: lightgreen;
			border-bottom: 2px dashed #ccc;
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="row">
			<div class="col-lg-8 col-md-6 box">占8
				<div class="row">
					<div class="col-lg-1 box1">占1</div>
					<div class="col-lg-2 col-lg-offset-1 box2">占2</div>
				</div>
			</div>
			<div class="col-lg-8 col-md-6 box">占8
				<div class="row">
					<div class="col-lg-2 box1">占2</div>
					<div class="col-lg-2 col-lg-offset-1 box2">占2</div>
				</div>
			</div>
			<div class="col-lg-8 col-md-6 box">占8
				<div class="row">
					<div class="col-lg-3 box1">占3</div>
					<div class="col-lg-2 col-lg-offset-1 box2">占2</div>
				</div>
			</div>
			<div class="col-lg-8 col-md-6 box">占8
				<div class="row">
					<div class="col-lg-4 box1">占4</div>
					<div class="col-lg-2 col-lg-offset-1 box2">占2</div>
				</div>
			</div>
			<div class="col-lg-8 col-md-6 box">占8
				<div class="row">
					<div class="col-lg-5 box1">占5</div>
					<div class="col-lg-2 col-lg-offset-1 box2">占2</div>
				</div>
			</div>
			<div class="col-lg-8 col-md-6 box">占8
				<div class="row">
					<div class="col-lg-6 box1">占6</div>
					<div class="col-lg-2 col-lg-offset-1 box2">占2</div>
				</div>
			</div>
			<div class="col-lg-8 col-md-6 box">占8
				<div class="row">
					<div class="col-lg-7 box1">占7</div>
					<div class="col-lg-2 col-lg-offset-1 box2">占2</div>
				</div>
			</div>
			<div class="col-lg-8 col-md-6 box">占8
				<div class="row">
					<div class="col-lg-8 box1">占8</div>
					<div class="col-lg-2 col-lg-offset-1 box2">占2</div>
				</div>
			</div>
			<div class="col-lg-8 col-md-6 box">占8
				<div class="row">
					<div class="col-lg-9 box1">占9</div>
					<div class="col-lg-2 col-lg-offset-1 box2">占2</div>
				</div>
			</div>
			<div class="col-lg-8 col-md-6 box">占8
				<div class="row">
					<div class="col-lg-10 box1">占10</div>
				</div>
			</div>
			<div class="col-lg-8 col-md-6 box">占8
				<div class="row">
					<div class="col-lg-11 box1">占11</div>
				</div>
			</div>
			<div class="col-lg-8 col-md-6 box">
				<div class="row">
					<div class="col-lg-12 box1">占12</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>